<!DOCTYPE html>
<!--PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml"-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" />
<script src="js/domReady.js"></script>
<script src="js/indexJs.js"></script>
<title>辛集云- 前端求职个人站</title>
</head>

<body>
<div class="body">
    <!-- 加载页面 -->
    <div class="Loading" id="Loading" >
    	<!-- 左边图 和右边图  -->
    	<div class="load_left"></div>
        <div class="load_right"></div>
        <!--遮罩-->
        <div id="mask" class="Mask"></div>
        <!--Logo-->
        <div id="log" class="log"></div>
        <!--事件加载-->
        <div id="load" class="Load"></div>
    </div>
    
    <!-- 目录 -->
    <div class="Catalog" id="Catalog">
   		
    	<p id="translate" class="translate">
            <span class="left"></span>
            <span class="right"></span>
            <span class="bottom"></span>
            <span class="top"></span>
        </p>
        <ul class="contents" id="contents">
            <li class="on">
                <a href="script:;">Home</a>
                <span class="active"></span>
            </li>
            <!-- 作品展示 -->
            <li>
                <a href="script:;">Display of works</a>
                <span class="active"></span>
            </li>
            <!-- 轻松一刻  /小游戏 -->
            <li>
                <a href="script:;">Game time</a>
                <span class="active"></span>
            </li>
            <!-- 关于我 -->
            <li>
                <a href="script:;">About me</a>
                <span class="active"></span>
            </li>
            <!-- 结尾-->
            <li>
                <a href="script:;">The end</a>
                <span class="active"></span>
            </li>
        </ul>
    </div>
        
    <!-- 作品展示 -->
    <div class="for_work" id="for_work">
		<p class="work_po"></p>
		<p class="work_pt"></p>
		<p class="work_ps"></p>
		<p class="work_pq"></p>
		<p class="work_pe"></p>
    	<div class="work_one">
        	<a href="LHHXGame/index.html" target="_blank">
            	<span class="show_w">游戏网站：jQ无缝焦点图,模拟假数据.</span>
            </a>
        </div>
		<div class="work_two">
        	<a href="moduleDs/index.html" target="_blank">
            	<span class="show_w">移动端网站：移动端无缝焦点图,自适应大小.</span>
            </a>
        </div>
		<div class="work_three">
        	<a href="MI/index.html" target="_blank">
            	<span class="show_w">店商网站：静态页布局,渐隐焦点图.</span>
            </a>
        </div>
    </div>
    
    <!-- 轻松一刻 游戏 -->
    <div class="A_moment_relief" id="A_moment_relief">
    	<p></p>
        <div class="moment_div">
        	<span class="line_x"></span>
        	<span class="line_y"></span>
			<div class="Moment_one fM">
            	<a href="game/贪吃蛇.html" target="_blank">
                    <p class="head"></p>
                    <h3>贪吃蛇</h3>
                    <p class="introduce">贪吃蛇：原生js编写.思想:设点随机点,数组保存设的属性去的方向坐标,盒子的宽高/蛇的宽高的到能移动的次数,使用定时器让其自动走起来,判断x,y坐标,判断是否吃到.难点:吃完后让蛇的长度变长,跟随蛇头的坐标.</p>
                </a>
            </div>
			<div class="Moment_two fM">
           	 	<a href="game/2048.html" target="_blank">
                    <p class="head"></p>
                    <h3>2048</h3>
                    <p class="introduce">2048:Jquery,js编写.思路：将块按比例分成16份,在其上面再创建16块,用来显示数字操作,创建二维数组,在清空二维数组,根基当前二维数组里面的值,选择不同颜色和背景色。生成数字,判断还能不能生成数字,判断随机出来的坐标在二维数组里是否为0,0就是空白坐标可以生成.根据数改变背景和字体颜色.上下左右判断方向,同时还应该判断是否还能移动.难点:判断什么状态下能移动,和移动的方向.</p>
                </a>
            </div>
			<div class="Moment_three fM">
          	  	<a href="game/坚持.html" target="_blank">
                    <p class="head"></p>
                    <h3>坚持10s</h3>
                    <p class="introduce">坚持10s:原生js编写.思想：4个方向出现的随机球,每个方向的一个坐标值是不变的,另一个坐标是随机的,每个方向出来又有要去的三个对面方向.难点：判断每个球和当前控制球是否碰撞.</p>
              	</a>
            </div>
			<div class="Moment_four fM">
            	<a href="game/拼图.html" target="_blank">
                    <p class="head"></p>
                    <h3>拼图</h3>
                    <p class="introduce">拼图游戏：原生js编写.思想：获取父级的宽高,js生成标签,每个标签的坐标位置就是背景图的坐标,存成数组.难点：点击时候判断当前周围是否有空白标签,有的画就交换位置,然后判断是否与开始的数组一致,一致就是过关.</p>
                </a>
            </div>
		</div>
	</div>
    
    <!-- 关于我 技能介绍-->
    <div class="About_me" id="About_me">
    	<p></p>
        <div>
        	<h3>MY SKILLS</h3>
            <span class="line"></span>
            <span class="show">Go ahead and choose your life</span>
            <div class="skill">
            	<span class="Mask">
                	css/css3
                    <a class="bFA" href="javascript:;">85%</a>
                	<p class="Ma_m"></p>
                	<div class="bord"></div>
                </span>
                <span class="Mask">
                	Angular.js等插件
                    <a class="bFA" href="javascript:;">75%</a>
                	<p class="Ma_m"></p>
                	<div class="bord"></div>
                </span>
                <span class="Mask">	
                	html/html5
                    <a class="bFA" href="javascript:;">85%</a>
                	<p class="Ma_m"></p>
                	<div class="bord"></div>
                </span>
                <span class="Mask">
                	<a class="bFA" href="javascript:;">90%</a>
                	Javascript/Jquery
                	<p class="Ma_m"></p>
                	<div class="bord"></div>
                </span>
            </div>
        </div>
    </div>
    
    <!-- 联系我 -->
    <div class="The_end" id="The_end">
    	<p></p>
        <div>
      		<h3>Please contact me</h3>
            <span class="line"></span>
        	<span class="show">Maybe I'm not the best, but I will try my best to be the best.</span>
            <div class="contact">
                <p>Tel:<span>157-0797-3128</span></p>
                <p>QQ:<span>1623387156</span></p>
                <p>E-mail:<span>15707973128@163.com</span></p>
            	<p>WeChat:<span>15707973128</span></p>
                <p>辛集云</p>
            </div>
            <span class="M_line"></span>
        </div>
    </div>
</div>
</body>
</html>
